<template>
    <el-card class="w-1100px m-auto">
        <div class="flex h-full h-660px">
            <div class="basis-2/3 flex justify-center items-center border-gray-300 border-r border-solid">
                <el-carousel class="w-full h-full" :interval="5000" arrow="always">
                    <el-carousel-item v-for="item in 4" :key="item">
                        <h3 text="2xl" justify="center">{{ item }}</h3>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="basis-1/3 px-6 relative">
                <!-- 头部作者块 -->
                <div class="flex justify-between items-cente mt-4">
                    <div class="flex items-center">
                        <el-avatar class="mr-3" :size="32"
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                        <span class="text-large font-600 mr-3"> Title </span>
                    </div>
                    <el-button type="danger" round>关注</el-button>
                </div>
                <el-divider />
                <!-- 中心内容 -->
                <!-- 底部点赞收藏评论 -->
                <div class="absolute bottom-0 left-0 w-full p-6">
                    <div>
                        <span>
                            <el-icon :size="32">
                                <Pointer />
                            </el-icon>
                            44
                        </span>
                        <span>
                            <el-icon :size="30">
                                <Star />
                            </el-icon>
                            33
                        </span>
                        <span>
                            <el-icon :size="30">
                                <ChatDotRound />
                            </el-icon>
                            64
                        </span>
                    </div>
                    <div>
                        <el-input v-model="input" placeholder="Please input" />
                    </div>
                </div>
            </div>
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import {
    Pointer,
    Star,
    ChatDotRound
} from '@element-plus/icons-vue'
import { ref } from 'vue'
const input = ref('')
</script>
<style scoped>
:deep(.el-card__body) {
    padding: 0
}

:deep(.el-carousel__container) {
    height: 100%;
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>